<template>
    <div>
        <van-field
                readonly
                v-model="selected"
                :name="name"
                :required="required"
                :label="label"
                :placeholder="placeholder"
                :border="border"
                :rules="selectRule"
                @click="openSelection">
        </van-field>

        <van-popup v-model="show" bind:close="onClose" position="bottom">
            <van-area :area-list="areaList" @confirm="selectOk" @cancel="onClose"/>
        </van-popup>
    </div>
</template>

<script>
  import { pcaa } from 'area-data'

  export default {
    name: "AppPcaSelect",
    props:{
      display:{
        type:String,
        default:'inline-block',
        required:false
      },
      name:{
        type:String,
        default:'',
        required:false
      },
      required:{
        type:Boolean,
        default:false,
        required:false
      },
      label:{
        type:String,
        default:'',
        required:false
      },
      placeholder:{
        type:String,
        default:'请选择',
        required:false
      },
      border:{
        type:Boolean,
        default:false,
        required:false
      },
      code:{
        type: String,
        default: '',
        required: false
      },
      dest:{
        type: String,
        default: '',
        required: false
      },
      ogn:{
        type: String,
        default: '',
        required: false
      },
      value:{
        type:String,
        required:false
      },

    },
    data(){
      return {
        selected:'',
        containerId:'',
        show:false,
        areaList:{}
      }
    },
    watch:{
      value:{
        immediate:false,
        handler(val){
          if(!val || val==0){
            this.selected = ''
          }else{
            this.loadItem()
          }
        }
      }
    },
    created(){
      this.initPcaData();
      this.initContainerId();
    },
    computed:{
      selectRule(){
        if(this.required===true){
          return [{ required: true, message: `请选择${this.label}`}]
        }else{
          return [];
        }
      }
    },
    methods:{
      initPcaData(){
        let obj = {};
        let province_list = pcaa['86'];
        obj['province_list'] = province_list;
        let city_list = {};
        let county_list = {};
        Object.keys(province_list).map(pro=>{
          let cityTemp = pcaa[pro];
          Object.keys(cityTemp).map(city=>{
            city_list[city] = cityTemp[city];
            let areaTemp = pcaa[city];
            Object.keys(areaTemp).map(area=>{
              county_list[area] = areaTemp[area]
            })
          })
        });
        obj['city_list'] = city_list;
        obj['county_list'] = county_list;
        this.areaList = obj
        if(this.value && this.value.length>0){
          this.loadItem()
        }
      },
      loadItem(){
        let code = this.value;
        let area = this.areaList['county_list'][code];
        let cityCode = parseInt(parseInt(code)/100) + '00';
        let city = this.areaList['city_list'][cityCode];
        let proCode = parseInt(parseInt(code)/10000) + '0000';
        let pro = this.areaList['province_list'][proCode];
        this.selected = pro + '/' + city + '/' + area
      },
      openSelection(){
        this.show = true
      },
      onClose(){
        this.show = false;
      },
      initContainerId(){
        this.containerId = 'msty'+new Date().getTime();
      },
      getContainer(){
        return document.getElementById(this.containerId)
      },
      selectOk(arr){
        //console.log(arr);
        let textArr = [];
        for(let item of arr){
          textArr.push(item.name)
        }
        this.selected = textArr.join('/');
        this.$emit('change',arr[2].code)
        this.show = false
      },
    },
    model: {
      prop: 'value',
      event: 'change'
    }

  }
</script>

